<template>
  <div>
    <!--搜索-->
    <div class="toolbar">
      <el-text class="mx-1">用户姓名:&nbsp;</el-text>
      <el-input
        v-model="param.user_name"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">商品名称:&nbsp;</el-text>
      <el-input
        v-model="param.product_name"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">订单编号:&nbsp;</el-text>
      <el-input
        v-model="param.order_code"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-button type="primary" @click="getOrderList">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        prop="order_code"
        label="订单编号"
        align="center"
        width="180px"
      />
      <el-table-column prop="product_name" label="商品名称" align="center" />
      <el-table-column prop="product_price" label="商品价格" align="center" />
      <el-table-column prop="user_name" label="用户名称" align="center" />
      <el-table-column
        prop="shipping_company"
        label="物流公司"
        align="center"
      />
      <el-table-column prop="tracking_number" label="物流单号" align="center" />
      <el-table-column prop="shipping_fee" label="运费" align="center" />
      <el-table-column prop="payment_status" label="支付状态" align="center">
        <template #default="{ row }">
          <span v-if="row.payment_status == 0">已支付</span>
          <span v-else-if="row.payment_status == 1">未支付</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="delivery_address"
        label="收货地址"
        align="center"
      />
      <el-table-column prop="order_amount" label="订单总金额" align="center" />
      <el-table-column prop="status" label="操作" align="center" width="230px">
        <template #default="{ row }">
          <div class="mb-4">
            <el-button type="warning" plain @click="updateUs(row)"
              >修改</el-button
            >
            <el-button type="danger" plain @click="deleteOrders(row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="background-color: #fff">
      <el-pagination
        layout="prev, pager, next,sizes,total,jumper"
        :total="total"
        @current-change="chpage"
        @size-change="chsize"
      />
    </div>

    <OrderUpdate
      ref="orderUpdates"
      :visible="isShow"
      :orders="selectedOrder"
      @close="isShow = false"
      @refreshUserList="getOrderList"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { getOrder, deleteOrder } from "@/api/order/order.js";
import OrderUpdate from "@/views/order/OrderUpdate.vue";

const orderUpdates = ref(null);
const userAdd = ref(null);
const tableData = ref([]);
let isShow = ref(false);
let isShows = ref(false);
let selectedOrder = ref(null); // 用来存储选中的用户数据
let param = ref({
  page: 1,
  pageSize: 10,
  user_name: "",
  product_name: "",
  order_code: ""
});
const total = ref(0); // 总记录数

/**
 * 获取信息列表
 */
async function getOrderList() {
  let res = await getOrder(param.value);
  if (res.code == 200) {
    tableData.value = res.data.list;
    param.value.page = res.data.page;
    param.value.pageSize = res.data.pageSize;
    total.value = res.data.total;
  }
}

/**
 * 删除订单
 * @param row 订单410行数据
 */
async function deleteOrders(row) {
  let res = await deleteOrder(row.id);
  if (res.code == 200) {
    ElMessage.success("删除成功！");
    getOrderList();
  } else {
    ElMessage.error("删除失败！");
  }
}

/**
 * 打开修改用户对话框
 * @param row 用户数据
 */
function updateUs(row) {
  selectedOrder.value = row; // 将选中的用户数据传递给 selectedUser
  isShow.value = true; // 显示修改对话框
}

/**
 * 重置输入框内容
 */
function reset() {
  param.value = {
    page: 1,
    pageSize: 10,
    user_name: "",
    product_name: "",
    order_code: ""
  };
  getOrderList();
}

// 分页处理
function chpage(pg) {
  param.value.page = pg;
  getOrderList();
}

function chsize(ps) {
  param.value.pageSize = ps;
  param.value.page = 1;
  getOrderList();
}

// 初始化加载列表
onBeforeMount(() => {
  getOrderList();
});
</script>

<style scoped></style>
